<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Activity-BpmnJs</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="app">
    <div id="header" onselectstart="return false">
        <a @click="current = 'designer'" :class="{active: current == 'designer'}">流程设计</a>
        <a @click="getProcessList" :class="{active: current == 'process'}">流程列表</a>
        <a @click="getTaskList" :class="{active: current == 'task'}">所有待办任务</a>
        <a @click="getHistoryList" :class="{active: current == 'history'}">所有已办任务</a>
        <a @click="getMyApplyList" :class="{active: current == 'myApply'}">我发起的流程</a>
        <span @click="logout" class="logout">注销 {{username}}</span>
    </div>
    <div id="main">
        <iframe v-show="current == 'designer'" src="./bpmn/index.html" :style="iframeStyle"></iframe>
        <div v-show="current == 'process'">
            <table>
                <tr @click="checkedProcess = ''">
                    <th></th>
                    <th>PROCESS_ID</th>
                    <th>NAME</th>
                    <th>DEPLOYMENT_ID</th>
                    <th>DEPLOYMENT_TIME</th>
                </tr>
                <tr v-for="item in processList" @click="checkedProcess = item.id" class="pointer" :class="{checked: checkedProcess == item.id}">
                    <td><input type="radio" v-model="checkedProcess" :value="item.id" /></td>
                    <td>{{item.id}}</td>
                    <td class="nowrap">{{item.name}}</td>
                    <td>{{item.deploymentId}}</td>
                    <td class="nowrap">{{item.deploymentTime}}</td>
                </tr>
            </table>
            <div class="table-btn-wrapper center">
                <button @click="startProcess">启动流程</button>
                <button @click="editDiagram">设计流程</button>
                <button @click="deleteDeployment">删除流程</button>
            </div>
        </div>
        <div v-show="current == 'task'">
            <table>
                <tr @click="checkedTask == ''">
                    <th></th>
                    <th>TASK_ID</th>
                    <th>NAME</th>
                    <th>VARIABLES</th>
                    <th>PROCESS_ID</th>
                    <th>ASSIGNEE</th>
                    <th>CREATE_TIME</th>
                </tr>
                <tr v-for="item in taskList" @click="checkedTask = item.id" class="pointer" :class="{checked: checkedTask == item.id}">
                    <td><input type="radio" v-model="checkedTask" :value="item.id" /></td>
                    <td>{{item.id}}</td>
                    <td class="nowrap">{{item.name}}</td>
                    <td>{{item.variables}}</td>
                    <td>{{item.processId}}</td>
                    <td class="nowrap">{{item.assignee}}</td>
                    <td class="nowrap">{{item.createTime}}</td>
                </tr>
            </table>
            <div class="table-btn-wrapper center">
                <input type="radio" v-model="params.audit" value="true" />通过
                <input type="radio" v-model="params.audit" value="false" />驳回
                <button @click="completeTask">提交</button>
            </div>
            <div class="comment-wrapper">
                <textarea v-model="params.comment" rows="5" cols="130"></textarea>
            </div>
        </div>
        <div v-show="current == 'history'">
            <table>
                <tr>
                    <th>TASK_ID</th>
                    <th>NAME</th>
                    <th>VARIABLES</th>
                    <th>PROCESS_ID</th>
                    <th>ASSIGNEE</th>
                    <th>END_TIME</th>
                </tr>
                <tr v-for="item in historyList">
                    <td>{{item.id}}</td>
                    <td class="nowrap">{{item.name}}</td>
                    <td>{{item.variables}}</td>
                    <td>{{item.processId}}</td>
                    <td class="nowrap">{{item.assignee}}</td>
                    <td class="nowrap">{{item.endTime}}</td>
                </tr>
            </table>
        </div>
        <div v-show="current == 'myApply'">
            <table>
                <tr @click="clearApply">
                    <th>INSTANCE_ID</th>
                    <th>NAME</th>
                    <th>START_TIME</th>
                    <th>END_TIME</th>
                    <th></th>
                </tr>
                <tr v-for="item in myApplyList" :class="{checked: checkedApply == item.id}">
                    <td class="nowrap">{{item.id}}</td>
                    <td class="nowrap">{{item.name}}</td>
                    <td class="nowrap">{{item.startTime}}</td>
                    <td class="nowrap">{{item.endTime}}</td>
                    <td class="nowrap center">
                        <span @click="showDiagram(item.id)" class="td-btn">进度</span>
                        <span @click="showVariable(item.id)" class="td-btn">详情</span>
                    </td>
                </tr>
            </table>
            <div v-html="diagramSVG"></div>
            <table v-if="myApplyVars">
                <tr>
                    <th>NAME</th>
                    <th>TIME</th>
                    <th>ASSIGNE</th>
                    <th>AUDIT</th>
                    <th>COMMENT</th>
                </tr>
                <tr v-for="item in myApplyVars">
                    <td>{{item.name}}</td>
                    <td>{{item.endTime}}</td>
                    <td>{{item.assignee}}</td>
                    <td>{{item.audit}}</td>
                    <td>{{item.comment}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="./index.js"></script>
<script>
    new Vue(App)
</script>
</body>
</html>